<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登陆注册模块</title>
<style type="text/css">
.yaxian{
	width:300px;
	height:50px;
	margin:20px auto;
}
a{
	width:102px;
	height:50px;    
	display:block;                              /*将超链接转换为块元素*/                
	float:left;                                 /*超链接左浮动*/ 
	background:url(images/login.png);
}
.two{
	width:100px;
	background-position:-102px 0;
}    
.three{
	width:98px;
	background-position:-202px 0;
}    
.one:hover{background-position:0 -50px;}
.two:hover{
	width:102px;
    background-position:-100px -50px; 
	margin-left:-2px;
}
.three:hover{
	width:100px;
    background-position:-200px -50px;
	margin-left:-2px;
}
</style>
</head>
<body>
<div class="yaxian">
	<a href="#" class="one"></a>
    <a href="#" class="two"></a>
    <a href="#" class="three"></a>
</div>
</body>
</html>